<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click='showName'>点击提示学校名称</button>
    </div>
</template>


<script>
 //组件交互相关的代码（数据、方法等）
//    const School = Vue.extend({
//         template: `
        
//         `,
//         data() {
//             return {
//                 schoolName: '深职院',
//                 address: '深圳市'
//             }
//         },
//         methods: {
//             showName() {
//                 alert(this.schoolName)
//             }
//         },
//     })
//     export default School

   export default{
       name:'School',
       data() {
            return {
                schoolName: '深职院',
                address: '深圳市'
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        }
   }
    

</script>

<style>
/* 组件的样式 */
.demo{
    background-color: orange;
}
</style>



